import QtQuick 2.3
import "qrc:///Constants.js" as Constants

Rectangle
{
    // Identifier of the item
    id: button

    // These properties act as constants, useable outside this QML file
    property int buttonHeight: Constants.buttonHeight
    property int buttonWidth: 150
    property bool disabled: false

    // Attaches to the Text element's text content
    property string label: "button"
    property color labelColor: Constants.buttonFontColor
    property real labelSize: Constants.buttonFontSize
    property string labelFont: Constants.buttonFontFamily

    // The color highlight when the mouse hovers on the rectangle
    property color onHoverColor: Constants.buttonBackgroundColor
    property color borderColor: Constants.buttonBackgroundColor

    // buttonColor is set to the button's main color
    property color buttonColor: Constants.buttonBackgroundColor

    // buttonImage
    property string buttonImage: ""

    // Set appearance properties
    radius: 2
    antialiasing: true
    border.width: 0 /* no border */
    border.color: borderColor
    width: buttonWidth
    height: buttonHeight

    // left side image
    Image
    {
        id: buttonImage
        width: 20
        height: 20
        source: parent.buttonImage
        anchors.verticalCenter: parent.verticalCenter
        x: 20
    }

    // Mouse area
    MouseArea
    {
        id: buttonMouseArea
        anchors.fill: parent            // Stretch the area to the parent's dimension
        onClicked: { if(!parent.disabled) parent.clicked() }

        // If true, then onEntered and onExited called if mouse hovers in the mouse area
        // If false, a button must be clicked to detect the mouse hover
        hoverEnabled: true

        // Display a border if the mouse hovers on the button mouse area
        onEntered: parent.border.color = parent.onHoverColor

        //Remove the border if the mouse exits the button mouse area
        onExited: parent.border.color = borderColor
    }

    // Text
    Text
    {
        id: buttonLabel
        anchors.centerIn: parent
        text: parent.label               // Bind the text to the parent's text
        color: buttonMouseArea.pressed ? Qt.lighter(parent.labelColor, 1.25) : parent.labelColor
        font.pointSize: parent.labelSize
        font.family: parent.labelFont

        // Animate the color whenever the color property changes
        Behavior on color { ColorAnimation { duration: 50 } }
    }

    // Change the color of the button when pressed
    color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.25) : buttonColor

    // Animate the color whenever the color property changes
    Behavior on color { ColorAnimation { duration: 50 } }

    // Scale the button when pressed
    // scale: buttonMouseArea.pressed ? 1.1 : 1.0

    // Animate the scale property change
    // Behavior on scale { NumberAnimation { duration: 20 } }

    // clicked() is callable and a signal handler,
    // onClicked is automatically created
    signal clicked()
    onClicked:
    {
        console.log(buttonLabel.text + " clicked")
    }
}
